<template>
  <div>
    <BasicModal
      :okText="$t('table.system.system_conform_add')"
      :title="$t('table.system.system_modal_new')"
      @register="registerModel"
      :minHeight="100"
      @ok="okFun"
      :cancelText="$t('business.common_cancel')"
    >
      <BasicForm @register="regiserForm" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal/index';
  import { BasicForm, useForm, FormSchema } from '/@/components/Form/index';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import { insertCommissionModel } from '/@/api/commission/index.ts';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const FORM_SIZE = useFormSetting().getFormSize;
  interface Options {
    label?: string;
    model_ids?: string;
    levels?: [];
    id?: string;
    closable?: boolean;
  }
  const props = defineProps({
    gamesData: {
      type: Object,
      default: () => {},
    },
  });
  const emit = defineEmits(['closeLoad', 'register']);
  const newOptionsList = computed(() => {
    const newList = seletOptions.value.filter((option) => {
      return !props.gamesData.some((item) => item.model_ids.split(',').includes(option.model_ids));
    });
    const options = newList.map((item: any) => {
      return {
        label: item.label,
        value: item.model_ids,
      };
    });
    return options;
  });
  const seletOptions = ref<Options[]>([
    {
      label: t('table.system.system_real_person'),
      model_ids: '1',
      levels: [],
    },
    {
      label: t('table.system.system_fish_get'),
      model_ids: '2',
      levels: [],
    },
    {
      label: t('table.system.system_electronic'),
      model_ids: '3',
      levels: [],
    },
    {
      label: t('table.system.system_physical_education'),
      model_ids: '4',
      levels: [],
    },
    {
      label: t('table.system.system_original_game'),
      model_ids: '8',
      levels: [],
    },
    {
      label: t('table.system.system_get_chess'),
      model_ids: '5',
      levels: [],
    },
  ]);
  const schemasList: FormSchema[] = [
    {
      field: 'field',
      component: 'Select',
      label: t('table.system.system_model_type'),
      required: true,
      componentProps: () => {
        return {
          options: newOptionsList,
          mode: 'multiple',
          getPopupContainer: () => document.body,
        };
      },
    },
  ];
  const [registerModel, { closeModal }] = useModalInner();
  const [regiserForm, { getFieldsValue, resetFields }] = useForm({
    schemas: schemasList,
    showActionButtonGroup: false,
    baseColProps: {
      span: 20,
    },
    size: FORM_SIZE,
  });
  async function okFun() {
    const values = await getFieldsValue();
    await insertCommissionModel({ model_ids: values.field.join() });
    emit('closeLoad');
    resetFields();
    closeModal();
  }
</script>
